<template>
	 <ex-dialog v-model="visible" draggable :title="cardShowName" :width="1300">
		<template #default>
			<div class="cardHead">
				<div style="height: 50px;width: 100%;margin-top: 7px;margin-bottom: -10px;">
				<div style="margin-left: 15px;float: left;">
					<img class="cardtopblockimg" src="img/zichan-icon.png"/>
				</div>
				<div style="float: left;font-size: 14px;font-weight: 400;margin-left: 20px;">
					<p>{{card!=null?card.name:""}}</p>
				</div>
			</div>
			</div>
			<card-content v-if="card" :key="uk" ref="cardContent" :card="card" :data-form="form" :classname="contentClass"></card-content>
		</template>
		<template #footer>
			<div style="flex:auto;text-align: center;">
					<el-button v-if="!preview" plain type="primary" @click="save" :loading="loading">保 存</el-button>
					<el-button v-if="!preview" plain type="warning" @click="reset" :loading="loading">重 置</el-button>
					<el-button plain type="info" @click="this.visible = false" :loading="loading">关 闭</el-button>
			</div>
		</template>
	</ex-dialog>
</template>

<script>
import ExLabel from "@/components/exLabel/index.vue";
import CardContent from "@/views/asset/card/card_content.vue";
import exDialog from '@/components/exDialog'

export default {
	name: 'dataCard',
	computed: {},
	emits: ['success'],
	components: {
		CardContent,
		ExLabel,
		exDialog,
	},
	props: {
		preview: {type: Boolean, default: true},
		addApi: {type: Object, default: null},
		editApi: {type: Object, default: null},
	},
	data() {
		return {
			visible: false,
			form: {},
			loading: false,
			oldForm: null,
			card: null,
			originalCard:null,
			cardHeight: 0,
			assetCategoryId: null,
			cardShowName:null,
			uk: 0,
			isAlready:false,
			contentClass:"cardContent",
			animateOpen: {
				animation: 'bounceIn',
				duration: '0.5s'
			},
			animateClose: {
				animation: 'fadeOutDown',
				duration: '0.5s'
			}
		}
	},
	watch: {
		form: {
			handler() {
				this.assetCategoryId = this.form.assetCategoryId || (this.form.assetInfo && this.form.assetInfo.assetCategoryId);
				let code = (this.form.assetInfo && this.form.assetInfo.code)||this.form.code;
				if(code){
					this.cardShowName = code+"--"+((this.form.assetInfo && this.form.assetInfo.name)||this.form.name);
				}else{
					if(this.originalCard){
						this.cardShowName = this.originalCard.name==="资产入库明细专用卡片"?"":this.originalCard.name;
					}
				}
				if(this.form._editAssets){
					this.cardShowName = this.originalCard.name;
				}
			},
			deep: true,
			immediate: true,
		},
		assetCategoryId: {
			async handler() {
				if (this.assetCategoryId) {
					let tempCard = this.$TOOL.objCopy(this.originalCard);
					this.form._authColumnIds = await this.$cache.data.loadColumns(this.assetCategoryId);
					if(this.form.documentId&&this.form.originalAssetInfo.id){
						let assetCategory = await this.$cache.data.loadAssetCategory(this.assetCategoryId);
						let assetCard = await this.$cache.data.loadDataCard(assetCategory.assetCardId);
						if (assetCard.modules[0].props.tabs) {
							assetCard.modules[0].props.tabs.forEach(tab => {
								tab.widgets.forEach(widget=>{
									if(widget.props.columns){
										widget.props.columns.forEach(column=>{
											column.jsonColumnCode="assetInfo";
                      // if(this.form.documentType!=='change'){
                      //   column.isReadonly="1";
                      // }
										});
									}
								});
								tempCard.modules[0].props.tabs.push(tab);
							});
						}
					}

          if((this.form.assetInfo&&!this.form.assetInfo.code)||this.form.detailIds){
            tempCard.modules.forEach(module=>{
              if(module.props.tabs){
                module.props.tabs.forEach(tab =>{
                  tab.widgets.forEach(widget=>{
                    if(widget.props.columns){
                      widget.props.columns = widget.props.columns.filter(column => column.widgetType!=='file');
                    }
                  });
                });
              }
            });
          }
          this.card = tempCard;
					this.uk++;
				}
			},
			deep: true,
			immediate: false,
		}
	},
	mounted() {
	},
	methods: {
		async initData() {

		},
		relHandler(relMap) {
			if (!this.form.relMaps) {
				this.form.relMaps = {};
			}
			for (let key in relMap) {//清空旧的数据
				this.form.relMaps[key] = {};
			}
			//重新赋值新数据
			Object.assign(this.form.relMaps, relMap);
		},
		//显示
		async open(entity) {
			if (!entity) {
				this.$message.warning("参数错误");
				return;
			}
			if (!entity.cardId) {
				this.$message.warning("未配置数据卡片");
				return;
			}
			this.card = {};
			this.assetCategoryId = null;
			this.originalCard = await this.$cache.data.loadDataCard(entity.cardId);
      this.form = entity;//不允许拷贝，要使用原值，单据页面会有根据watch来统计变化信息
      this.oldForm = this.$TOOL.objCopy(this.form);

			if(entity.assetCategoryId||(entity.assetInfo&&entity.assetInfo.code)){
				this.card = {};
			}else{
        let tempCard = this.$TOOL.objCopy(this.originalCard);
        if((this.form.assetInfo&&!this.form.assetInfo.code)||this.form.detailIds){
          tempCard.modules.forEach(module=>{
            if(module.props.tabs){
              module.props.tabs.forEach(tab =>{
                tab.widgets.forEach(widget=>{
                  if(widget.props.columns){
                    widget.props.columns = widget.props.columns.filter(column => column.widgetType!=='file');
                  }
                });
              });
            }
          });
        }
        this.card = tempCard;
			}

			this.visible = true;
			this.initData();
		},
		async close(){
			this.visible = false;
		},
		async reset() {
			let confirm = await this.$confirm('请确认是否执行此操作', '提示', {type: 'warning'}).then(() => {
				return true;
			}).catch(() => {
				return false;
			});
			if (!confirm) return;

			this.loading = true;
      Object.assign(this.form,this.$TOOL.objCopy(this.oldForm));//this.form不允许拷贝，要使用原值，单据页面会有根据watch来统计变化信息
      await this.open(this.form);//重新打开，避免卡片字段不能动态显示
			this.loading = false;
		},
		//保存
		async save() {
			let valid = await this.$refs.cardContent.validate();
			if (valid) {
				let confirm = await this.$confirm('请确认是否执行此操作', '提示', {type: 'warning'}).then(() => {
					return true;
				}).catch(() => {
					return false;
				});
				if (!confirm) return;
				try {
					this.loading = true
					var res;
					if (this.form.id) {
						if (!this.editApi) {
							return;
						}
						res = await this.editApi.post(this.form)
					} else {
						if (!this.addApi) {
							return;
						}
						res = await this.addApi.post(this.form)
					}
					if (res.code === 2000) {
						this.$emit('success');
						this.$message.success(this.$t("code." + res.code));
						this.visible = false;
						this.$store.dispatch("commit", this.form.entityName);
						this.$store.dispatch("refreshClick", this.form.modelId);
					}
				} finally {
					this.loading = false
				}
			}
		},
	}
}
</script>

<style>

.mainDragList {
   overflow: auto;
   min-height: 50px;
   border: 1px dashed #e6e6e6;
}

h2 {
   font-size: 17px;
   color: #3c4a54;
   padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
   color: #fff;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
   background-color: #ffffff;
 }


 .el-table--striped .el-table__body .el-table__row:hover {
   background-color: #EDEDED !important;
}
.el-table--striped .el-table__body .el-table__row:hover td.el-table__cell{
   background-color: #EDEDED !important;
}

.cardHead{
   background-color: #fff;
}
.cardContent{
   height: 530px;
   overflow-y: auto;
   display: block;
   border-bottom: 1px solid #EDEDED;

}
.cardContent .el-card {
   border-radius: 0px;
   border:none;

}
.cardContent .el-card.is-always-shadow {
   box-shadow: none;
}

.cardHead .cardtopblockimg {
   height: 40px;
   width: 40px;

}

</style>
